<!--// views/orders/PendingPaymentOrders.vue-->
<!--<template>-->
<!--  <div class="pending-payment-orders">-->
<!--    <el-card>-->
<!--      <template #header>-->
<!--        <div class="card-header">-->
<!--          <span>待付款订单管理</span>-->
<!--          <div class="right">-->
<!--            <el-date-picker-->
<!--              v-model="dateRange"-->
<!--              type="daterange"-->
<!--              range-separator="至"-->
<!--              start-placeholder="开始日期"-->
<!--              end-placeholder="结束日期"-->
<!--              value-format="YYYY-MM-DD"-->
<!--              :shortcuts="dateShortcuts"-->
<!--              class="date-picker"-->
<!--            />-->
<!--            <el-input-->
<!--              v-model="searchForm.keywords"-->
<!--              placeholder="订单号/用户名/手机号"-->
<!--              class="search-input"-->
<!--              clearable-->
<!--            >-->
<!--              <template #prefix>-->
<!--                <el-icon><Search /></el-icon>-->
<!--              </template>-->
<!--            </el-input>-->
<!--            <el-button type="primary" @click="handleSearch">搜索</el-button>-->
<!--            <el-button @click="resetSearch">重置</el-button>-->
<!--          </div>-->
<!--        </div>-->
<!--      </template>-->

<!--      <el-table-->
<!--        v-loading="loading"-->
<!--        :data="orderList"-->
<!--        border-->
<!--        style="width: 100%"-->
<!--      >-->
<!--        <el-table-column type="expand">-->
<!--          <template #default="props">-->
<!--            <div class="goods-info">-->
<!--              <div v-for="item in props.row.goodsList" :key="item.id" class="goods-item">-->
<!--                <el-image-->
<!--                  :src="item.image"-->
<!--                  :preview-src-list="[item.image]"-->
<!--                  fit="cover"-->
<!--                  class="goods-image"-->
<!--                />-->
<!--                <div class="goods-detail">-->
<!--                  <p class="goods-name">{{ item.name }}</p>-->
<!--                  <p class="goods-spec">规格：{{ item.specs }}</p>-->
<!--                  <p class="goods-price">-->
<!--                    单价：¥{{ item.price }} × {{ item.quantity }}-->
<!--                  </p>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </template>-->
<!--        </el-table-column>-->

<!--        <el-table-column prop="orderNo" label="订单号" width="180" />-->

<!--        <el-table-column label="用户信息" width="150">-->
<!--          <template #default="scope">-->
<!--            <p>{{ scope.row.userName }}</p>-->
<!--            <p>{{ scope.row.userPhone }}</p>-->
<!--          </template>-->
<!--        </el-table-column>-->

<!--        <el-table-column label="订单金额" width="150">-->
<!--          <template #default="scope">-->
<!--            <p>商品金额：¥{{ scope.row.goodsAmount }}</p>-->
<!--            <p>运费：¥{{ scope.row.shippingFee }}</p>-->
<!--            <p class="total-amount">应付：¥{{ scope.row.totalAmount }}</p>-->
<!--          </template>-->
<!--        </el-table-column>-->

<!--        <el-table-column label="支付状态" width="180">-->
<!--          <template #default="scope">-->
<!--            <div class="payment-status">-->
<!--              <el-tag type="warning">待支付</el-tag>-->
<!--              <p class="countdown" :class="{ 'urgent': scope.row.remainingSeconds < 1800 }">-->
<!--                剩余支付时间：{{ formatCountdown(scope.row.remainingSeconds) }}-->
<!--              </p>-->
<!--            </div>-->
<!--          </template>-->
<!--        </el-table-column>-->

<!--        <el-table-column prop="createTime" label="下单时间" width="180" />-->

<!--        <el-table-column label="收货信息" width="200">-->
<!--          <template #default="scope">-->
<!--            <p>{{ scope.row.receiverName }}</p>-->
<!--            <p>{{ scope.row.receiverPhone }}</p>-->
<!--            <p class="address-text">{{ scope.row.receiverAddress }}</p>-->
<!--          </template>-->
<!--        </el-table-column>-->

<!--        <el-table-column label="操作" fixed="right" width="200">-->
<!--          <template #default="scope">-->
<!--            <el-button-->
<!--              type="primary"-->
<!--              link-->
<!--              @click="handleViewDetails(scope.row)"-->
<!--            >-->
<!--              订单详情-->
<!--            </el-button>-->
<!--            <el-button-->
<!--              type="warning"-->
<!--              link-->
<!--              @click="handleRemindPayment(scope.row)"-->
<!--            >-->
<!--              催付款-->
<!--            </el-button>-->
<!--            <el-button-->
<!--              type="danger"-->
<!--              link-->
<!--              @click="handleCancelOrder(scope.row)"-->
<!--            >-->
<!--              取消订单-->
<!--            </el-button>-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--      </el-table>-->

<!--      <div class="pagination-container">-->
<!--        <el-pagination-->
<!--          v-model:current-page="currentPage"-->
<!--          v-model:page-size="pageSize"-->
<!--          :total="total"-->
<!--          :page-sizes="[10, 20, 50, 100]"-->
<!--          layout="total, sizes, prev, pager, next, jumper"-->
<!--          @size-change="handleSizeChange"-->
<!--          @current-change="handleCurrentChange"-->
<!--        />-->
<!--      </div>-->
<!--    </el-card>-->

<!--    &lt;!&ndash; 订单详情对话框 &ndash;&gt;-->
<!--    <el-dialog-->
<!--      v-model="detailsVisible"-->
<!--      title="订单详情"-->
<!--      width="800px"-->
<!--      destroy-on-close-->
<!--    >-->
<!--      <el-descriptions :column="2" border>-->
<!--        <el-descriptions-item label="订单号">-->
<!--          {{ currentOrder.orderNo }}-->
<!--        </el-descriptions-item>-->
<!--        <el-descriptions-item label="订单状态">-->
<!--          <el-tag type="warning">待付款</el-tag>-->
<!--        </el-descriptions-item>-->
<!--        <el-descriptions-item label="下单时间">-->
<!--          {{ currentOrder.createTime }}-->
<!--        </el-descriptions-item>-->
<!--        <el-descriptions-item label="剩余支付时间">-->
<!--          {{ formatCountdown(currentOrder.remainingSeconds) }}-->
<!--        </el-descriptions-item>-->
<!--        <el-descriptions-item label="用户名称">-->
<!--          {{ currentOrder.userName }}-->
<!--        </el-descriptions-item>-->
<!--        <el-descriptions-item label="联系电话">-->
<!--          {{ currentOrder.userPhone }}-->
<!--        </el-descriptions-item>-->
<!--        <el-descriptions-item label="收货人">-->
<!--          {{ currentOrder.receiverName }}-->
<!--        </el-descriptions-item>-->
<!--        <el-descriptions-item label="收货电话">-->
<!--          {{ currentOrder.receiverPhone }}-->
<!--        </el-descriptions-item>-->
<!--        <el-descriptions-item label="收货地址" :span="2">-->
<!--          {{ currentOrder.receiverAddress }}-->
<!--        </el-descriptions-item>-->
<!--      </el-descriptions>-->

<!--      <div class="goods-list">-->
<!--        <h4>商品信息</h4>-->
<!--        <el-table :data="currentOrder.goodsList" border>-->
<!--          <el-table-column prop="name" label="商品名称" />-->
<!--          <el-table-column prop="specs" label="规格" width="150" />-->
<!--          <el-table-column prop="price" label="单价" width="100">-->
<!--            <template #default="scope">-->
<!--              ¥{{ scope.row.price }}-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--          <el-table-column prop="quantity" label="数量" width="100" />-->
<!--          <el-table-column label="小计" width="100">-->
<!--            <template #default="scope">-->
<!--              ¥{{ scope.row.price * scope.row.quantity }}-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--        </el-table>-->

<!--        <div class="amount-info">-->
<!--          <p>商品总额：¥{{ currentOrder.goodsAmount }}</p>-->
<!--          <p>运费：¥{{ currentOrder.shippingFee }}</p>-->
<!--          <p class="total">应付金额：¥{{ currentOrder.totalAmount }}</p>-->
<!--        </div>-->
<!--      </div>-->
<!--    </el-dialog>-->

<!--    &lt;!&ndash; 取消订单对话框 &ndash;&gt;-->
<!--    <el-dialog-->
<!--      v-model="cancelDialogVisible"-->
<!--      title="取消订单"-->
<!--      width="500px"-->
<!--    >-->
<!--      <el-form :model="cancelForm" label-width="100px">-->
<!--        <el-form-item label="取消原因" required>-->
<!--          <el-select v-model="cancelForm.reason" placeholder="请选择取消原因">-->
<!--            <el-option-->
<!--              v-for="item in cancelReasons"-->
<!--              :key="item.value"-->
<!--              :label="item.label"-->
<!--              :value="item.value"-->
<!--            />-->
<!--          </el-select>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="备注说明">-->
<!--          <el-input-->
<!--            v-model="cancelForm.remark"-->
<!--            type="textarea"-->
<!--            rows="3"-->
<!--            placeholder="请输入备注说明"-->
<!--          />-->
<!--        </el-form-item>-->
<!--      </el-form>-->
<!--      <template #footer>-->
<!--        <span class="dialog-footer">-->
<!--          <el-button @click="cancelDialogVisible = false">取消</el-button>-->
<!--          <el-button type="primary" @click="confirmCancelOrder">-->
<!--            确认-->
<!--          </el-button>-->
<!--        </span>-->
<!--      </template>-->
<!--    </el-dialog>-->
<!--  </div>-->
<!--</template>-->

<!--<script setup>-->
<!--import { ref, reactive, onMounted, onUnmounted } from 'vue'-->
<!--import { ElMessage, ElMessageBox } from 'element-plus'-->

<!--// 日期快捷选项-->
<!--const dateShortcuts = [-->
<!--  {-->
<!--    text: '最近一周',-->
<!--    value: () => {-->
<!--      const end = new Date()-->
<!--      const start = new Date()-->
<!--      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)-->
<!--      return [start, end]-->
<!--    },-->
<!--  },-->
<!--  {-->
<!--    text: '最近一个月',-->
<!--    value: () => {-->
<!--      const end = new Date()-->
<!--      const start = new Date()-->
<!--      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)-->
<!--      return [start, end]-->
<!--    },-->
<!--  },-->
<!--]-->

<!--// 取消订单原因选项-->
<!--const cancelReasons = [-->
<!--  { value: 1, label: '用户申请取消' },-->
<!--  { value: 2, label: '支付超时自动取消' },-->
<!--  { value: 3, label: '商品已下架' },-->
<!--  { value: 4, label: '商品库存不足' },-->
<!--  { value: 5, label: '其他原因' },-->
<!--]-->

<!--// 状态变量-->
<!--const loading = ref(false)-->
<!--const orderList = ref([])-->
<!--const currentPage = ref(1)-->
<!--const pageSize = ref(10)-->
<!--const total = ref(0)-->
<!--const dateRange = ref([])-->
<!--const searchForm = reactive({-->
<!--  keywords: '',-->
<!--  startDate: '',-->
<!--  endDate: '',-->
<!--})-->

<!--const detailsVisible = ref(false)-->
<!--const currentOrder = ref({})-->
<!--const cancelDialogVisible = ref(false)-->
<!--const cancelForm = reactive({-->
<!--  reason: '',-->
<!--  remark: '',-->
<!--})-->

<!--// 倒计时定时器-->
<!--let countdownTimer = null-->

<!--// 格式化倒计时显示-->
<!--const formatCountdown = (seconds) => {-->
<!--  if (seconds <= 0) return '已超时'-->
<!--  const hours = Math.floor(seconds / 3600)-->
<!--  const minutes = Math.floor((seconds % 3600) / 60)-->
<!--  const remainingSeconds = seconds % 60-->
<!--  return `${hours}小时${minutes}分${remainingSeconds}秒`-->
<!--}-->

<!--// 更新订单倒计时-->
<!--const updateCountdown = () => {-->
<!--  orderList.value.forEach(order => {-->
<!--    if (order.remainingSeconds > 0) {-->
<!--      order.remainingSeconds&#45;&#45;-->
<!--    }-->
<!--  })-->
<!--}-->

<!--// 获取订单列表-->
<!--const getOrderList = async () => {-->
<!--  loading.value = true-->
<!--  try {-->
<!--    // 这里替换为实际的API调用-->
<!--    const res = await fetch('/api/orders/pending-payment', {-->
<!--      method: 'POST',-->
<!--      headers: {-->
<!--        'Content-Type': 'application/json',-->
<!--      },-->
<!--      body: JSON.stringify({-->
<!--        page: currentPage.value,-->
<!--        pageSize: pageSize.value,-->
<!--        ...searchForm,-->
<!--      }),-->
<!--    })-->
<!--    const data = await res.json()-->
<!--    if (data.code === 0) {-->
<!--      orderList.value = data.data.list-->
<!--      total.value = data.data.total-->
<!--    } else {-->
<!--      ElMessage.error(data.message || '获取订单列表失败')-->
<!--    }-->
<!--  } catch (error) {-->
<!--    console.error(error)-->
<!--    ElMessage.error('获取订单列表失败')-->
<!--  } finally {-->
<!--    loading.value = false-->
<!--  }-->
<!--}-->

<!--// 查看订单详情-->
<!--const handleViewDetails = (row) => {-->
<!--  currentOrder.value = { ...row }-->
<!--  detailsVisible.value = true-->
<!--}-->

<!--// 催付款-->
<!--const handleRemindPayment = async (row) => {-->
<!--  try {-->
<!--    // 这里替换为实际的API调用-->
<!--    const res = await fetch(`/api/orders/${row.id}/remind-payment`, {-->
<!--      method: 'POST',-->
<!--    })-->
<!--    const data = await res.json()-->
<!--    if (data.code === 0) {-->
<!--      ElMessage.success('已发送催付提醒')-->
<!--    } else {-->
<!--      ElMessage.error(data.message || '发送催付提醒失败')-->
<!--    }-->
<!--  } catch (error) {-->
<!--    console.error(error)-->
<!--    ElMessage.error('发送催付提醒失败')-->
<!--  }-->
<!--}-->

<!--// 取消订单-->
<!--const handleCancelOrder = (row) => {-->
<!--  currentOrder.value = row-->
<!--  cancelForm.reason = ''-->
<!--  cancelForm.remark = ''-->
<!--  cancelDialogVisible.value = true-->
<!--}-->

<!--// 确认取消订单-->
<!--const confirmCancelOrder = async () => {-->
<!--  if (!cancelForm.reason) {-->
<!--    ElMessage.warning('请选择取消原因')-->
<!--    return-->
<!--  }-->

<!--  try {-->
<!--    // 这里替换为实际的API调用-->
<!--    const res = await fetch(`/api/orders/${currentOrder.value.id}/cancel`, {-->
<!--      method: 'POST',-->
<!--      headers: {-->
<!--        'Content-Type': 'application/json',-->
<!--      },-->
<!--      body: JSON.stringify(cancelForm),-->
<!--    })-->
<!--    const data = await res.json()-->
<!--    if (data.code === 0) {-->
<!--      ElMessage.success('订单已取消')-->
<!--      cancelDialogVisible.value = false-->
<!--      getOrderList()-->
<!--    } else {-->
<!--      ElMessage.error(data.message || '取消订单失败')-->
<!--    }-->
<!--  } catch (error) {-->
<!--    console.error(error)-->
<!--    ElMessage.error('取消订单失败')-->
<!--  }-->
<!--}-->

<!--// 搜索相关-->
<!--const handleSearch = () => {-->
<!--  if (dateRange.value) {-->
<!--    searchForm.startDate = dateRange.value[0]-->
<!--    searchForm.endDate = dateRange.value[1]-->
<!--  } else {-->
<!--    searchForm.startDate = ''-->
<!--    searchForm.endDate = ''-->
